<template>
   <div>
     <template v-if="isShowInfo">
        <zm-detail-table :list="list" :info="detailInfo"></zm-detail-table>
        <!-- 详情规则折叠面板 -->
        <detail-collapse :info-list="detailInfo.rule" :exchange-range="detailInfo.exchangeRange"></detail-collapse>
    </template>
    <h3 class="fc9" v-else>暂无数据</h3>
   </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import ZmDetailTable from '@/components/zmDetailTable'
import DetailCollapse from '@/views/product/components/DetailCollapse'
import productProgramApis from '@/api/src/productProgram'
import { list } from './const'
export default {
  name: 'OfflineSpecialDetail',
  components: {ZmDetailTable, DetailCollapse},
  mixins: [tableMixin],
  inject: ['$detail'],
  data () {
    return {
      isShowInfo: false,
      detailInfo: {}
    }
  },
  computed: {
    list () {
      return list(this)
    },
    // 线下特殊方案
    offlineSpecialRule () {
      return this.$detail.infoData.offlineSpecialRule
    }
  },
  watch: {},
  created () {
    if (this.offlineSpecialRule && this.offlineSpecialRule.length > 0) {
      this.init()
    } else {
      this.isShowInfo = false
    }
  },
  methods: {
    async init () {
      const paramsID = this.offlineSpecialRule[0].programId
      this.detailInfo = await productProgramApis.getInfo({id: paramsID})
      this.isShowInfo = true
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
